<template>
  <el-dialog title="编辑" :visible.sync="switchBillVisible" width="85%" :before-close="closeDialog" @open="dialogShow">
    <div class="form-top cf">
      <p class="tit">{{cacheData.date}} {{cacheData.week}}</p>
      <p class="sub-tit">
        <span class="txt">{{cacheData.show_row}}</span>
        <span class="txt">{{cacheData.show_time}}</span>
        <span class="txt">玩家人数：{{cacheData.show_persons}}/{{cacheData.person_up}}</span>
      </p>
      <div class="status">{{cacheData.show_status}}</div>
    </div>
    <div class="form-line">
      <label for="" class="label-txt">本场收入</label>：{{cacheData.total}} <span class="yuan">元</span>
    </div>
    <div class="form-line">
      <label for="" class="label-txt">支付总额</label>：{{cacheData.pay}}<span class="yuan">元</span>
    </div>
    <div v-for="item in cacheData.channel">
      <!--乐惠-->
      <div class="form-line" v-if="item.name == '乐惠'">
        <div class="line-top">
          <label for="" class="label-txt">支付渠道</label>
          <el-checkbox label="乐惠" v-model="lehui" @change="resetData('lehui')"></el-checkbox>
          <label for="" class="ml194">支付金额</label>
          <span class="pr">{{item.total}}</span>
          <span class="yuan">元</span>
        </div>
        <div v-if="lehui === true">
          <div class="line-box" v-for="(list,ind) in lehuiData" :class="list.is_del == 1?'hide':''">
            <div class="form-list">
              <label for="" class="label-txt">预订人姓名</label>
              <el-input v-model="list.contact"></el-input>
              <label for="" class="label-txt">联系方式</label>
              <el-input v-model="list.mobile" class="w260"></el-input>
            </div>
            <div class="form-list">
              <label for="" class="label-txt">单价</label>
              <el-input v-model="list.price" @blur="syncPrice('lehui')"></el-input>
              <span class="yuan">元</span>
              <label for="" class="label-txt">人数</label>
              <el-input v-model="list.number" @blur="syncPrice('lehui')"></el-input>
              <label for="" class="label-txt">支付码</label>
              <el-input v-model="list.pay_code" @blur="suggestOrderNo(list.pay_code)"></el-input>
              <label for="" class="label-txt">订单号</label>
              <el-autocomplete
                class="inline-input w260"
                v-model="list.order_no"
                :fetch-suggestions="querySearch"
                :ind="ind"
                placeholder="请输入内容"
                @select="handleSelect"
                ref="suggestInput"
              >
                <template slot-scope="{ item }">
                  <div class="suggest-name">{{ item.value }}</div>
                  <span class="addr">{{ item.sort }}</span>
                </template>
              </el-autocomplete>
              <label for="" class="label-txt">付款用户</label>
              <el-input v-model="list.pay_username"></el-input>
            </div>
            <el-button type="danger" size="mini" class="form-button form-button-copy" plain @click="copy('lehui',ind)" >复制</el-button>
            <el-button type="danger" size="mini" class="form-button" plain @click="del('lehui',ind)" v-if="ind+1 !== lehuiData.length" :len="lehuiData.length" :index="ind">删除</el-button>
          </div>
          <el-button type="danger" size="mini" class="form-button" plain @click="add('lehui')">新增</el-button>
        </div>
      </div>
      <!--大众-->
      <div class="form-line" v-if="item.name === '大众点评'">
        <div class="line-top">
          <label for="" class="label-txt">支付渠道</label>
          <el-checkbox label="大众点评" v-model="dianping"></el-checkbox>
          <label for="" class="ml194">支付金额</label>
          <span class="pr">{{item.total}}</span>
          <span class="yuan">元</span>
        </div>

        <div class="line-box" v-if="dianping === true">
          <!--在线订场-->
          <div class="form-list">
            <label for="" class="label-txt">在线预订</label>
            <el-checkbox v-model="booking_online"></el-checkbox>
          </div>
          <div v-if="booking_online === true">
            <div  v-for="list in dianpingData.online">
            <div class="form-list">
              <label for="" class="label-txt">预订人姓名</label>
              <el-input v-model="list.contact"></el-input>
              <label for="" class="label-txt">联系方式</label>
              <el-input v-model="list.mobile" class="w260"></el-input>
            </div>
            <div class="form-list">
              <label for="" class="label-txt">订场方式</label>
              <el-select v-model="list.booking_type" placeholder="请选择">
                <el-option value="包场" key="包场">包场</el-option>
                <el-option value="拼场" key="拼场">拼场</el-option>
              </el-select>
              <label for="" class="label-txt">单价</label>
              <el-input v-model="list.price" @blur="syncPrice('dianping')"></el-input>
              <span class="yuan">元</span>
              <label for="" class="label-txt">人数</label>
              <el-input v-model="list.number" @blur="syncPrice('dianping')"></el-input>
              <label for="" class="label-txt" >订单号</label>
              <el-input v-model="list.order_no" class="w260"></el-input>
            </div>
            </div>
          </div>
          <!--团购券-->
          <div class="form-list">
            <label for="" class="label-txt">团购券</label>
            <el-checkbox v-model="tuan_quan"></el-checkbox>
          </div>
          <div v-if="tuan_quan === true">
            <div v-for="(list,ind) in dianpingData.tuan" :class="[list.is_del == 1?'hide':'','line-box']">
              <div class="form-list">
                <label for="" class="label-txt">预订人姓名</label>
                <el-input v-model="list.contact"></el-input>
                <label for="" class="label-txt">联系方式</label>
                <el-input v-model="list.mobile" class="w260"></el-input>
              </div>
              <div class="form-list">
                <label for="" class="label-txt">单价</label>
                <el-input v-model="list.price" @blur="syncPrice('dianping')"></el-input>
                <span class="yuan">元</span>
                <label for="" class="label-txt">人数</label>
                <el-input v-model="list.number" @blur="syncPrice('dianping')"></el-input>
                <label for="" class="label-txt">团购券号</label>
                <el-input v-model="list.order_no" class="w260"></el-input>
              </div>
              <el-button type="danger" size="mini" class="form-button" plain @click="del('dianping',ind)"  :len="dianpingData.tuan.length" :index="ind" v-if="ind+1 !== dianpingData.tuan.length">删除</el-button>
            </div>
            <el-button type="danger" size="mini" class="form-button" plain @click="add('dianping')">新增</el-button>
          </div>

        </div>
      </div>
      <!--现金支付-->
      <div class="form-line" v-if="item.name == '现金支付'">
        <div class="line-top">
          <label for="" class="label-txt">支付渠道</label>
          <el-checkbox label="现金支付" v-model="cash"></el-checkbox>
          <label for="" class="ml194">支付金额</label>
          <span class="pr">{{item.total}}</span>
          <span class="yuan">元</span>
        </div>
        <div v-if="cash === true">
          <div class="line-box" v-for="list in cashData">
            <div class="form-list">
              <label for="" class="label-txt">预订人姓名</label>
              <el-input v-model="list.contact"></el-input>
              <label for="" class="label-txt">联系方式</label>
              <el-input v-model="list.mobile" class="w260" ></el-input>
            </div>
            <div class="form-list">
              <label for="" class="label-txt">单价</label>
              <el-input v-model="list.price" @blur="syncPrice('cash')"></el-input>
              <span class="yuan">元</span>
              <label for="" class="label-txt">人数</label>
              <el-input v-model="list.number" @blur="syncPrice('cash')"></el-input>
              <label for="" class="label-txt">备注</label>
              <el-input v-model="list.remarks" class="w260"></el-input>
            </div>
          </div>
        </div>
      </div>
      <!--POS机-->
      <div class="form-line" v-if="item.name == 'POS机'">
        <div class="line-top">
          <label for="" class="label-txt">支付渠道</label>
          <el-checkbox label="POS机" v-model="pos"></el-checkbox>
          <label for="" class="ml194">支付金额</label>
          <span class="pr">{{ item.total }}</span>
          <span class="yuan">元</span>
        </div>
        <div v-if="pos === true">
          <div class="line-box" v-for="list in posData">
            <div class="form-list">
              <label for="" class="label-txt">预订人姓名</label>
              <el-input v-model="list.contact"></el-input>
              <label for="" class="label-txt" >联系方式</label>
              <el-input v-model="list.mobile" class="w260"></el-input>
            </div>
            <div class="form-list">
              <label for="" class="label-txt">单价</label>
              <el-input v-model="list.price" @blur="syncPrice('POS')"></el-input>
              <span class="yuan">元</span>
              <label for="" class="label-txt">人数</label>
              <el-input v-model="list.number" @blur="syncPrice('POS')"></el-input>
              <label for="" class="label-txt">流水单号</label>
              <el-input v-model="list.order_no" class="w260"></el-input>
            </div>
          </div>
        </div>
      </div>
      <!--免费优惠-->
      <div class="form-line" v-if="item.name == '免费优惠'">
        <div class="line-top">
          <label for="" class="label-txt">支付渠道</label>
          <el-checkbox label="免费优惠" v-model="free"></el-checkbox>
          <label for="" class="ml194">支付金额</label>
          <span class="pr">{{ item.total }}</span>
          <span class="yuan">元</span>
        </div>
        <div v-if="free === true">
          <div class="line-box">
            <div class="form-list">
              <label for="" class="label-txt">预订人姓名</label>
              <el-input v-model="freeData.contact"></el-input>
              <label for="" class="label-txt">联系方式</label>
              <el-input v-model="freeData.mobile" class="w260"></el-input>
            </div>
            <div class="form-list">
              <label for="" class="label-txt">VIP徽章</label>
              <el-checkbox v-model="vip"></el-checkbox>
              <label for="" class="label-txt">人数</label>
              <el-input v-model="freeData.vip.number"></el-input>
              <label for="" class="label-txt">备注</label>
              <el-input v-model="freeData.vip.remarks" class="w260"></el-input>
            </div>
            <div class="form-list">
              <label for="" class="label-txt">免费赠券</label>
              <el-checkbox v-model="free_quan"></el-checkbox>
              <label for="" class="label-txt">人数</label>
              <el-input v-model="freeData.free_quan.number"></el-input>
              <label for="" class="label-txt">备注</label>
              <el-input v-model="freeData.free_quan.remarks" class="w260"></el-input>
            </div>
            <div class="form-list">
              <label for="" class="label-txt">招待</label>
              <el-checkbox v-model="serve"></el-checkbox>
              <label for="" class="label-txt">人数</label>
              <el-input v-model="freeData.serve.number">{</el-input>
              <label for="" class="label-txt">备注</label>
              <el-input v-model="freeData.serve.remarks" class="w260"></el-input>
            </div>
          </div>
        </div>
      </div>

      <!--开场后退款-->
      <div class="form-line" v-if="item.name == '开场后退款'">
        <div class="line-top">
          <label for="" class="label-txt">支付渠道</label>
          <el-checkbox label="开场后退款" v-model="refund"></el-checkbox>
        </div>
        <div v-if="refund === true">
          <div v-for="(list,ind) in refundData" :class="[list.is_del == 1?'hide':'','line-box']">
            <div class="form-list">
              <label for="" class="label-txt">退款</label>
              <el-input v-model="list.price"></el-input>
              <span class="yuan">元</span>
              <label for="" class="label-txt">备注</label>
              <el-input v-model="list.remarks" class="w260"></el-input>
            </div>
            <div class="form-list">
              <label for="" class="label-txt">口袋助理流水号</label>
              <el-input v-model="list.order_no" class="w260"></el-input>
            </div>
            <div class="form-list">
              <InsertImage :parcel="list.img" :ind="ind" @upload="uploadImage"></InsertImage>
            </div>
            <el-button type="danger" size="mini" class="form-button" plain @click="del('refund',ind)" v-if="ind+1 !== refundData.length">删除</el-button>
          </div>
          <el-button type="danger" size="mini" class="form-button" plain @click="add('refund')">新增</el-button>
        </div>
      </div>
      <!--闪惠-->
      <div class="form-line" v-if="item.name == '闪惠'">
        <div class="line-top">
          <label for="" class="label-txt">支付渠道</label>
          <el-checkbox label="闪惠" v-model="shanhui" @change="resetData('shanhui')"></el-checkbox>
          <label for="" class="ml194">支付金额</label>
          <span class="pr">{{item.total}}</span>
          <span class="yuan">元</span>
        </div>
        <div v-if="shanhui === true">
          <div class="line-box" v-for="(list,ind) in shanhuiData" :class="list.is_del == 1?'hide':''">
            <div class="form-list">
              <label for="" class="label-txt">预订人姓名</label>
              <el-input v-model="list.contact"></el-input>
              <label for="" class="label-txt">联系方式</label>
              <el-input v-model="list.mobile" class="w260"></el-input>
            </div>
            <div class="form-list">
              <label for="" class="label-txt">单价</label>
              <el-input v-model="list.price" @blur="syncPrice('shanhui')"></el-input>
              <span class="yuan">元</span>
              <label for="" class="label-txt">人数</label>
              <el-input v-model="list.number" @blur="syncPrice('shanhui')"></el-input>
              <label for="" class="label-txt">支付码</label>
              <el-input v-model="list.pay_code"></el-input>
              <label for="" class="label-txt">订单号</label>
              <el-autocomplete
                class="inline-input w260"
                v-model="list.order_no"
                :fetch-suggestions="querySearch"
                :ind="ind"
                placeholder="请输入内容"
                @select="handleSelect"
                ref="suggestInput"
              >
                <template slot-scope="{ item }">
                  <div class="suggest-name">{{ item.value }}</div>
                  <span class="addr">{{ item.sort }}</span>
                </template>
              </el-autocomplete>
              <label for="" class="label-txt">付款用户</label>
              <el-input v-model="list.pay_username"></el-input>
            </div>
            <el-button type="danger" size="mini" class="form-button form-button-copy" plain @click="copy('shanhui',ind)" >复制</el-button>
            <el-button type="danger" size="mini" class="form-button" plain @click="del('shanhui',ind)" v-if="ind+1 !== shanhuiData.length" :len="shanhuiData.length" :index="ind">删除</el-button>
          </div>
          <el-button type="danger" size="mini" class="form-button" plain @click="add('shanhui')">新增</el-button>
        </div>
      </div>
    </div>
    <div class="form-line">
      <label for="" class="label-txt">备注</label>
      <el-input type="textarea" class="textarea" v-model="saveData.remarks"></el-input>
    </div>
    <div class="form-footer">
      <el-button class="button-certain" @click="submit" v-loading="submitLoading">确 定</el-button>
    </div>

  </el-dialog>
</template>

<script>
  import InsertImage from "./insertImage";
  const { Fetch } = require("@/common/fetch");
  export default {
    name: "editBillDailog",
    components: {InsertImage},
    props: ["switchBillVisible", "parcel"],
    data() {
      return  {
        form: {
          "id": "",
          "channel": "",
          "pay_type": "",
          "price": "",
          "number": "",
          "contact": "",
          "mobile": "",
          "remarks": "",
          "pay_code": "",
          "order_no":"",
          "booking_type":"",
          "img":[],
          // "img": ["http://realolg.com/images/2018/09/07/2c914bd1466c40f7747e9fcd5eb4c101.jpg", "http://realolg.com/images/2018/09/07/3443e0d6f9bf3e738e7ce058077d6420.jpg"],
          "pay_username": "",
          "is_del":0
        },
        saveData: {
          "theme_time_id": '',
          "channel_bill": [],
          "remarks": ''
        },
        suggestList:[],
        lehui: false,
        shanhui: false,
        dianping: false,
        pos: false,
        cash: false,
        free: false,
        refund: false,
        booking_online: false,
        tuan_quan: false,
        vip: false,
        free_quan: false,
        serve: false,
        lehuiData: [],
        shanhuiData: [],
        dianpingData: {
          tuan: [],
          online: []
        },
        posData: [],
        cashData: [],
        freeData: {
          contact: '',
          mobile: '',
          vip: {},
          free_quan: {},
          serve: {}
        },
        refundData: [],
        dialogImageUrl:'',
        cacheData:{},
        submitLoading: false,
      }
    },
    computed:{

    },
    methods: {
      closeDialog() {
        this.updateData()
        this.$emit('closeBill');
      },
      updateData(){
        this.lehui = false;
        this.dianping = false;
        this.pos=false;
        this.cash= false;
        this.free= false;
        this.refund= false;
        this.booking_online = false;
        this.tuan_quan = false;
        this.vip=false;
        this.free_quan = false;
        this.serve =false;
        this.lehuiData = [];
        this.dianpingData = {
          tuan: [],
          online: []
        };
        this.posData = [];
        this.cashData = [];
        this.freeData = {
          contact: '',
          mobile: '',
          vip: {},
          free_quan: {},
          serve: {}
        };
        this.refundData = [];
        this.dialogImageUrl = '';

      },
      dialogShow() {
        // 处理数据
        let self = this;
        this.cacheData = this.parcel;
        let channel =  this.cacheData.channel;
        channel && channel.forEach((item) => {
          var defaultData = {...{},...this.form};
          switch (item.name) {
            case "乐惠":
              if (item.channel_bill && item.channel_bill.length) {
                self.lehui = true;
                self.lehuiData = item.channel_bill;
              } else {
                defaultData.channel="lehui";
                self.lehuiData.push(defaultData);
              }
              break;
            case "闪惠":
              if (item.channel_bill && item.channel_bill.length) {
                self.shanhui = true;
                self.shanhuiData = item.channel_bill;
              } else {
                defaultData.channel="shanhui";
                self.shanhuiData.push(defaultData);
              }
              break;
            case "大众点评":
              if (item.channel_bill && item.channel_bill.length) {
                self.dianping = true;
                let that = self;
                item.channel_bill && item.channel_bill.forEach((list) => {
                  if (list.pay_type == '团购券') {
                    that.tuan_quan = true;
                    that.dianpingData.tuan.push(list);
                  } else {
                    that.booking_online = true;
                    that.dianpingData.online.push(list);
                  }
                });
              } else {
                defaultData.channel="dianping";
              }

              // 没有的话
              if(!self.dianpingData.online.length){
                self.dianpingData.online = [{...{},...defaultData,...{pay_type:'在线预订'}}];
              }
              if(!self.dianpingData.tuan.length){
                self.dianpingData.tuan = [{...{},...defaultData,...{pay_type:'团购券'}}];
              }
              break;
            case "POS机":
              if (item.channel_bill && item.channel_bill.length) {
                self.pos = true;
                self.posData = item.channel_bill;
              } else {
                defaultData.channel="POS";
                self.posData.push(defaultData);
              }
              break;
            case "现金支付":
              if (item.channel_bill && item.channel_bill.length) {
                self.cash = true;
                self.cashData = item.channel_bill;
              } else {
                defaultData.channel="cash";
                self.cashData.push(defaultData);
              }
              break;
            case "免费优惠":
              defaultData.channel="free";
              self.freeData.vip = {...{},...defaultData};
              self.freeData.free_quan = {...{},...defaultData};
              self.freeData.serve = {...{},...defaultData};
              if (item.channel_bill && item.channel_bill.length) {
                self.free = true;
                self.freeData.contact = item.channel_bill[0].contact;
                self.freeData.mobile = item.channel_bill[0].mobile;
                item.channel_bill && item.channel_bill.forEach((item) => {
                  if (item.pay_type == 'VIP徽章') {
                    self.vip = true;
                    self.freeData.vip = {...{},...item};
                  } else if (item.pay_type == '免费赠券') {
                    self.free_quan = true;
                    self.freeData.free_quan = {...{},...item};
                  } else if (item.pay_type == '招待') {
                    self.serve =true;
                    self.freeData.serve = {...{},...item};
                  }
                })
              }
              break;
            case "开场后退款":
              if (item.channel_bill && item.channel_bill.length) {
                self.refund = true;
                self.refundData = item.channel_bill;
              } else {
                defaultData.channel="refund";
                self.refundData.push(defaultData);
              }

              self.refundData && self.refundData.forEach((item) => {
                item.img = this.dealImages(item.img || [],'toDisplay');
              })
              break;
          }
        });
        this.saveData.theme_time_id = this.parcel.theme_time_id || '';
        this.saveData.remarks = this.parcel.remarks || '';
      },
      uploadImage(fileList,ind){
        this.refundData[ind].img = fileList || [];
      },
      copy(type,ind) {
        var defaultData = {...{},...this.form};
        switch(type){
          case 'lehui':
            this.lehuiData.push({...{},...this.lehuiData[ind]});
            this.syncPrice('lehui');
            break;
          case 'shanhui':
            this.shanhuiData.push({...{},...this.shanhuiData[ind]});
            this.syncPrice('shanhui');
            break;
        }
      },
      add(type){
        var defaultData = {...{},...this.form};
        switch(type){
          case 'shanhui':
            defaultData.channel="shanhui";
            this.shanhuiData.push({...{},...defaultData});
            break;
          case 'lehui':
            defaultData.channel="lehui";
            this.lehuiData.push({...{},...defaultData});
            break;
          case 'dianping':
            defaultData.channel="dianping";
            this.dianpingData.tuan.push({...{},...defaultData,...{pay_type:'团购券'}});
            break;
          case 'refund':
            defaultData.channel="refund";
            this.refundData.push({...{},...defaultData});
            break;
        }
      },
      del(type,ind){
        switch (type) {
          case 'lehui':
            this.lehuiData[ind].is_del = 1;
            break;
          case 'shanhui':
            this.shanhuiData[ind].is_del = 1;
            break;
          case 'dianping':
            this.dianpingData.tuan[ind].is_del = 1;
            break;
          case 'refund':
            this.refundData[ind].is_del = 1;
            break;
        }
      },
      dealImages(arr,type){
        // 处理图片
        const imgBox = [];
        if(type == 'toDisplay'){
          arr && arr.length && arr.forEach((item)=>{
            let imgItem = {
              "name":'',
              "url":item
            }
            imgBox.push(imgItem);
          });
        }else if(type == 'toSave'){
          arr && arr.length && arr.forEach((item)=>{
            if(item.response && !item.response.ret){
              imgBox.push(item.response.data);
            }
          });
        }
        return imgBox;
      },
      resetData(type){
        const self =this;
        const defaultData = {...this.form};
        if(this[type] == false){
          let typeArr = self[type+'Data'];
          if(typeArr.length == 1 &&  JSON.stringify(defaultData) == JSON.stringify(typeArr[0])){
            return;
          }
          this.$confirm('此操作将导致已填写的预订信息被清空，操作是否继续？','提示').then(()=>{
            // self[type+'Data'] = [];
            // self[type+'Data'].push(defaultData);
            self.parseDelData(self[type+'Data']);
          }).catch(()=>{
            self[type] = true;
          })
        }
      },
      parseDelData(arr){
        arr.forEach((item,ind)=>{
          if(!item.id){
            arr.splice(ind,1)
          }else{
            item.is_del = 1;
          }
        });
        return arr;
      },
      submit(){
        this.submitLoading = true;
        // 删除非要用is_del来表示，以至于我这恶心的代码
        let channelBill = [];
        if(this.lehui){
          channelBill = channelBill.concat(this.lehuiData);
        }else{
          channelBill = channelBill.concat(this.parseDelData(this.lehuiData));
        }
        if(this.shanhui){
          channelBill = channelBill.concat(this.shanhuiData);
        }else{
          channelBill = channelBill.concat(this.parseDelData(this.shanhuiData));
        }
        if(this.dianping && this.booking_online){
          channelBill = channelBill.concat(this.dianpingData.online)
        }else{
          channelBill = channelBill.concat(this.parseDelData(this.dianpingData.online));
        }
        if(this.dianping && this.tuan_quan){
          channelBill = channelBill.concat(this.dianpingData.tuan)
        }else{
          channelBill = channelBill.concat(this.parseDelData(this.dianpingData.tuan));
        }
        if(this.pos){
          channelBill = channelBill.concat(this.posData);
        }else{
          channelBill = channelBill.concat(this.parseDelData(this.posData));
        }
        if(this.cash){
          channelBill = channelBill.concat(this.cashData);
        }else{
          channelBill = channelBill.concat(this.parseDelData(this.cashData));
        }
        if(this.free){
          let obj = {
            contact: this.freeData.contact,
            mobile:this.freeData.mobile
          }
          this.freeData.vip = {...this.freeData.vip,...obj,...{"pay_type":"VIP徽章"}}
          this.freeData.free_quan = {...this.freeData.free_quan,...obj,...{"pay_type":"免费赠券"}};
          this.freeData.serve = {...this.freeData.serve,...obj,...{"pay_type":"招待"}};

          if(this.vip){
            channelBill = channelBill.concat(this.freeData.vip);
          }else{
            channelBill = channelBill.concat(this.parseDelData([this.freeData.vip]));
          }
          if(this.free_quan){
            channelBill = channelBill.concat(this.freeData.free_quan);
          }else{
            channelBill = channelBill.concat(this.parseDelData([this.freeData.free_quan]));
          }
          if(this.serve){
            channelBill = channelBill.concat(this.freeData.serve);
          }else{
            channelBill = channelBill.concat(this.parseDelData([this.freeData.serve]));
          }
        }
        this.refundData && this.refundData.forEach((item)=>{
          item.img = this.dealImages(item.img,'toSave');
        });
        if(this.refund){
          channelBill = channelBill.concat(this.refundData);
        }else{
          channelBill = channelBill.concat(this.parseDelData(this.refundData));
        }

        this.saveData.channel_bill = channelBill || [];
        Fetch('/admin/finance/api/theme_bill.php?action=save',{
          type:'post',
          isForm:true,
          data:JSON.stringify(this.saveData)
        }).then((res)=>{
          if(res.ret == 0){
            this.$emit('upload');
            this.updateData();
          }
          this.$message(res.message || '保存成功');
          this.submitLoading = false;
        }).catch((err)=>{
          console.log(err);
          debugger
        })
      },
      querySearch(queryString, cb){
        const showSuggest = [];
        this.suggestList && this.suggestList.forEach((item)=>{
          let list = '日期：'+item.pay_time + '金额：￥'+item.origin;
          showSuggest.push({
            "value":item.order_no,
            "sort":list
          });
        });
        cb(showSuggest);
      },
      suggestOrderNo(pay_code){
        const self =this;
        if(pay_code){
          Fetch(`/admin/finance/api/order_no_sugguest.php?channel=lehui&action=get&pay_code=${pay_code}`).then((res)=>{
            if(res.data &&res.data.length){
              vm.$set(self,'suggestList',res.data);
              // self.suggestList = res.data;
            }
          })
        }
      },
      handleSelect(item){
        // this.lehuiData[0].order_no = item.id;
        console.log(item)
      },
      syncPrice(handleChannel){
        let channelPrice;   //渠道的支付金额
        switch(handleChannel){
          case 'lehui':
            channelPrice = this.getChannelPrice(this.lehuiData);
            break;
          case 'shanhui':
            channelPrice = this.getChannelPrice(this.shanhuiData);
            break;
          case 'dianping':
            channelPrice = this.getChannelPrice(this.dianpingData.tuan.concat(this.dianpingData.online));
            break;
          case 'cash':
            channelPrice = this.getChannelPrice(this.cashData);
            break;
          case 'POS':
            channelPrice = this.getChannelPrice(this.posData);
            break;
        }

        let channelItem = this.cacheData.channel.find((item)=>{
          return item.channel == handleChannel;
        });
        channelItem.total = channelPrice;
        this.getTotalPrice();
      },
      getChannelPrice(arr){
        let price = 0;
        arr.forEach((item)=>{
          price += (~~item.price) * (~~item.number);
        })
        return price;
      },
      getTotalPrice(){
        let totalPrice  = 0;
        this.cacheData.channel.forEach((item)=>{
          if ( item.channel == 'refund' ) {
            totalPrice -= (~~item.total);
          } else {
            totalPrice += (~~item.total);
          }
        });
        this.cacheData.pay = totalPrice;
      }
    }
  }
</script>

<style scoped lang="scss">

  .el-input {
    width: 90px;
  }

  .el-input__inner {
    height: 30px;
  }
  .el-autocomplete-suggestion__list {
    margin: 0;
    padding: 0;
  }
  .addr{
    font-size: 12px;
    color: #b4b4b4;
  }
  .suggest-name{
    height: 16px;
  }
  .ml194 {
    margin-left: 194px;
  }
  .w260{
    width:260px;
  }
  .form {
    &-top {
      background: #FFED8C;
      border-radius: 3px;
      padding: 20px;
      .tit {
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #000000;
        letter-spacing: 0;
      }
      .sub-tit {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #000000;
        letter-spacing: 0;
      }
      .txt {
        margin-right: 17px;
      }
      .status {
        float: right;
        background: #000000;
        border-radius: 100px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;
        margin-top: -42px;
        padding: 7px 22px;
      }
    }
    &-line {
      margin: 20px 0;
      position: relative;
      .textarea {
        width: 75%;
        border: 1px solid #dcdfe6;
        border-radius: 5px;
        vertical-align: middle;
      }
    }

    &-list {
      margin: 20px 0;
    }
    &-button {
      position: absolute;
      right: 0;
      bottom: 95px;
      &-copy {
        bottom: 35px;
      }
      border: 1px solid #FF679E;
      border-radius: 3px;
      background: #fff;
      font-size: 14px;
      color: #FF679E;
    }
    &-footer {
      text-align: center;
    }
  }

  .line {
    &-box {
      position: relative;
      border-top: 1px solid rgba(151, 151, 151, 0.30);
      padding: 0 0 10px;
      &:after {
        content: '';
        width: 0;
        height: 0;
      }

    }
    &-top {
      margin-bottom: 20px;
      .pr {
        color: #FF679E;
      }
    }
  }

  .label-txt {
    margin: 0 5px 0 30px;
  }

  .look_img {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #FF679E;
    letter-spacing: 0;
    margin-left: 5px;
  }

  .button-certain {
    background: #FF679E;
    border-radius: 101px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0;
    padding: 10px 30px;
  }

  .m-upload {
    display: inline-block;
    vertical-align: top;
    margin-left: 50px;
  }
  .hide{
    display:none;
  }
</style>
